<template>
  <container>
    <div class="form-warpper">
      <div class="header">创建/修改 我家鸽鸽的活动</div>
      <el-form class="form" ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入活动地址" />
        </el-form-item>
        <el-form-item label="上传活动图片" prop="image">
          <el-upload
            ref="uploadRef"
            v-model:fileList="fileList"
            list-type="picture-card"
            :auto-upload="false"
            :limit="1">
            <div class="icon-warpper flex align-center justify-center">
              <Plus />
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动时间" prop="times">
          <el-date-picker
            v-model="form.times"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            range
            range-separator="至"
            clearable />
        </el-form-item>
        <el-form-item label="是否露出鸡脚">
          <el-switch
            v-model="form.switch"
            style="--el-switch-off-color: #e04c55"
            inactive-text="no"
            active-text="yes"
            inline-prompt />
        </el-form-item>
        <el-form-item label="选择技能" prop="checks">
          <el-checkbox-group v-model="form.checks">
            <el-checkbox value="唱" label="唱歌" />
            <el-checkbox value="跳" label="跳舞" />
            <el-checkbox value="rap" label="rap" />
            <el-checkbox value="篮球" label="打篮球" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="选择角色" prop="radio">
          <el-radio value="man" v-model="form.radio" label="小黑子" />
          <el-radio value="women" v-model="form.radio" label="真爱粉" />
          <el-radio value="manwomen" v-model="form.radio" label="纯路人" />
        </el-form-item>
        <el-form-item label="练习宣言" prop="declaration">
          <el-input type="textarea" v-model="form.textarea" placeholder="请输入练习宣言" :rows="5" />
        </el-form-item>
        <el-form-item label="活动评分" prop="declaration">
          <el-rate v-model="form.rate" show-text :texts="rateText" color="#f7ba2a" clearable />
        </el-form-item>
      </el-form>
      <div class="submit-buttons">
        <el-button :icon="Send" type="primary" @click="submit">提交</el-button>
        <el-button :icon="Clear" light @click="clearForm">清空</el-button>
      </div>
    </div>
  </container>
</template>

<script setup lang="ts">
import container from '@/components/container';
import { Send, Clear, Plus } from '@icon-park/vue-next';
import { ElMessage, FormRules } from 'element-plus';
import { reactive, ref, watchEffect } from 'vue';

const rateText = ['垃圾的', '差劲的', '一般的', '很好的', '极好的'];
const fileList = ref([]);
const form = ref({
  name: '',
  address: '',
  image: '',
  times: [],
  switch: false,
  checks: [],
  radio: null,
  textarea: '',
  rate: 0
});

const validateChecks = (rule: any, value: any, callback: any) => {
  if (value.includes('rap') && !value.includes('唱')) {
    return callback(new Error('勾选了rap就必须要勾选唱歌哦'));
  }
  return callback();
};

const rules = reactive<FormRules<any>>({
  name: { required: true, message: '请输入活动名称', trigger: 'blur' },
  address: { required: true, message: '请输入活动地址', trigger: 'blur' },
  image: { required: true, message: '上传活动图片', trigger: 'change' },
  times: { type: 'array', required: true, message: '请选择活动时间', trigger: 'change' },
  checks: [
    { type: 'array', required: true, message: '请选择技能', trigger: 'change' },
    { validator: validateChecks, trigger: 'change' }
  ],
  radio: { required: true, message: '请选择角色', trigger: 'change' }
});
const formRef = ref();

function submit() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    ElMessage.success('提交成功');
    clearForm();
  });
}
function clearForm() {
  form.value = {
    name: '',
    address: '',
    image: '',
    times: [],
    switch: false,
    checks: [],
    radio: null,
    textarea: '',
    rate: 0
  };
  fileList.value = [];
}

watchEffect(() => {
  if (!fileList.value[0]?.raw) return;
  form.value.image = URL.createObjectURL(fileList.value[0]?.raw!);
});
</script>

<style scoped lang="scss">
.header {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.form-warpper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form {
  width: 750px;
}
.submit-buttons {
  padding-left: 120px;
  width: 750px;
}

.icon-warpper {
  font-size: 28px;
  color: #999;
}
</style>
